<template>
  <div  style="width:100%;height: 100vh;background-color: #19181F;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;">
        <div class="view" style="margin-bottom:80px;">
            <div class="view flex-row align-start" style="margin: 0 auto;
            margin-bottom: 60px;position: relative;">
                <div style="font-size:40px;font-weight: bold;color:#fff;">STC DAO</div>
                <img :src="require('@/assets/imgs/safasdf.png')" style="width:40px;height:40px;position: absolute;position: absolute;
                right: -40px;
                top: -10px;"/>
            </div>
    
            <div style="width:calc(100vw - 150px);margin:0 auto;border:1px solid #696969;border-radius: 20px;padding:40px;display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;position: relative;">
                <div style="margin-bottom:20px;position: absolute;
                top: -40px;">
                    <img :src="require('@/assets/imgs/sadfasf.png')" style="width:80px;height:80px;"/>
                </div>
                <div style="font-size: 16px;color:#707070;">当前STC总量</div>
                <div style="margin-bottom: 40px;color: #fff;margin-top:20px;">{{ initData.mobius }}</div>
                <div style="margin-bottom:10px;font-size: 16px;color:#707070;">当前铸造力总和</div>
                <div style="color:#D7C19A;font-size:20px;">{{ initData.totalHashRate }}</div>
            </div>
        </div>
        
        <div  class="view" style="width:80%;margin:0 auto;">
            <van-button  type="primary" block color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" round @click="onConncet" :loading="isLoading" :disabled="canUse">连接钱包</van-button>
        </div>
    </div>
</template>

<script>
import Web3 from '@/util/web3.min'
import { getTotalHashRateData, toLogin  } from '@/api/index'
import axios from 'axios'
export default {
    components:{
    },
    
    data: function () {
    return {
            web3: null,
            address: '',
            canUse: true,
            isLoading: false,
            initData: {}
        }    
    },
    mounted() {
        if (!window.ethereum) {
            this.$dialog.alert({
                message: 'Please download metamask',
            });
            return
        }
        this.web3 = new Web3(window.ethereum);
        this.checkMetamask()
        this.fetchData()
    },
    computed: {
    },
    methods: {
        
        async fetchData() {
            const res = await getTotalHashRateData({})
            this.initData = res.data
        },
        toHome: function () {
            
        },
        onConncet() {
            this.isLoading = true
            this.web3.eth.personal.sign("STC DAO to the moon", this.address)
            .then( async res => {
                const ret = await toLogin({ address: this.address })
                this.isLoading = false
                if (ret.code == 1) {
                    this.$store.commit('LOGIN', {address: this.address, ...ret.data});
                    this.$router.replace({path: '/home'})
                } else {
                    this.$toast({
                        message: ret.msg,
                        position: 'top'
                    })
                }
            }).catch(err => {
                this.isLoading = false
                this.$dialog.alert({
                    message: 'connect wallet fail',
                });
            })
        },
        checkMetamask() {
            const eth = window.ethereum.request({
                method: 'eth_requestAccounts'
            });
            eth.then(res => {
                this.address = res[0];
                this.canUse = false
                
            })
        }
    }

}
</script>

<style scoped>
.view {display: flex;flex-direction: column;}
.height100 {height: 100%;}
.width100 {width: 100%;}
.flex-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex:2;}
.flex-1-50 {flex: 0 0 50%;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center {justify-content:center;}
.ovhidden {overflow: hidden;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.c-333 {font-size: #333;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
</style>